<template>
  <div class="container">
    <!-- <EqRapidReport style="position: absolute;top:5px;left:5px;z-index:5" title="地震构造图" :type="templateType[1].value" /> -->
    <div class="new-layerLegendDiv">
      <p @click="openLayer">
        <template v-if="isShowLayer == false">
          <img title="打开图层选择" src="@/assets/map/image/newImage/layer.png">
          <span style="color:#3a385e;">图层</span>
        </template>
        <template v-else>
          <img title="关闭图层选择" src="@/assets/map/image/newImage/layer-r.png">
          <span style="color:#107ce5;">图层</span>
        </template>
      </p>
      <p class="new-layerLengendDiv-split"></p>
      <p @click="openLegend">
        <template v-if="showHideLegendDivBoolMap == false">
          <img title="打开图例" src="@/assets/map/image/newImage/legend.png">
          <span style="color:#3a385e;">图例</span>
        </template>
        <template v-else>
          <img title="关闭图例" src="@/assets/map/image/newImage/legend-r.png">
          <span style="color:#107ce5;">图例</span>
        </template>
      </p>
      <!-- 图层 -->
      <Layer v-model:isShow="isShowLayer" ref="layer" @getFormLists="getFormLists" />
    </div>
    <!-- 地图 -->
    <SeismotectonicsMap v-if="completeRefreshIndexMap"
                          :allRadioIndexData="allRadioIndexData"
                          :allListData="allListData"
                          :typeCodeDataList="typeCodeDataList"
                          :dataTypeInfoArray="dataTypeInfoArray"
                          @manual="manual"
                          @getDetailListByCode="getDetailListByCode"
                          @getLegendHtml="getLegendHtml"
                          :type="templateType[1].value"/>

    <router-view></router-view>
    <!-- 手动出图 -->
    <ManualMapping v-model:open="manualOpen" title="地震构造图" :type="templateType[1].value" />
    <RemindDialog title="地震构造图" :type="templateType[1].value" :data="data" :loading="loading" />

    <div id="indexMap-mapDiv" class="ol-popup" v-show="isShowLegend">
      <!--图层图例-->
      <div v-if="showHideLegendDivBool" class="layerMap-legend">
        <!--滚动条-->
        <el-scrollbar max-height="500px">
          <p>图例</p>
          <div v-for="item in layerShowHideArray" :key="item.code" v-show="item.show" v-html="item.legendHtml">
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script setup>
  import ManualMapping from '@/views/quickMapping/common/manualMapping/index.vue'
  // import EqRapidReport from '@/views/quickMapping/common/eqRapidReport/index.vue'
  import Layer from '@/views/quickMapping/common/layer/layer.vue'
  import RemindDialog from '@/views/quickMapping/common/remindDialog/index'
  import SeismotectonicsMap from '@/map/seismotectonicsMap.vue'
  import { templateType } from '@/views/quickMapping/common/const'

  import { iServerHttp } from "@/map/projMap.js"

  const props = defineProps({ data: Array, loading: Boolean })
  const { proxy } = getCurrentInstance()
  const router = useRouter()
  // 地图
  // const completeRefreshIndexMap = ref(false);//防止刷新后地图不显示
  const completeRefreshIndexMap = ref(true);//防止刷新后地图不显示
  const allListData = ref([]);
  const showTableBool = ref(false);//是否显示表格
  const tempTableListData = ref([]);//根据行政区划代码查询活动数据列表
  const allRadioIndexData = ref([]);//全部序号列表
  const typeCodeDataList = ref([]);//选择图层的版本号数据列表
  const resetClearAllBool = ref(false);//是否重置清空全部图层数组

  //数据类型
  const dataTypeInfoArray = ref([
    //地震活动断层探查数据中心--ArcGIS图层
    {database:"arcgis", name: '全新世断层', label: '全新世断层', radioLabel: 'hddcarcgis-0', code: 'hddcarcgis-0', table:"全新世断层",url:"",zIndex:7,fieldId:"",sqlFilter:"全新世断层",show:false},
    {database:"arcgis", name: '晚更新世断层', label: '晚更新世断层', radioLabel: 'hddcarcgis-1', code: 'hddcarcgis-1', table:"晚更新世断层",url:"",zIndex:7,fieldId:"",sqlFilter:"晚更新世断层",show:false},
    {database:"arcgis", name: '早中更新世断层', label: '早中更新世断层', radioLabel: 'hddcarcgis-2', code: 'hddcarcgis-2', table:"早中更新世断层",url:"",zIndex:7,fieldId:"",sqlFilter:"早中更新世断层",show:false},
    {database:"arcgis", name: '前第四纪断层', label: '前第四纪断层', radioLabel: 'hddcarcgis-3', code: 'hddcarcgis-3', table:"前第四纪断层",url:"",zIndex:7,fieldId:"",sqlFilter:"前第四纪断层",show:false},
    ////////////////////////基础数据系统
    //1970年以来地震目录
    {database:"datacenter", name: '1970年以来地震目录（4.7<=M<5）', label: '4.7<=M<5', radioLabel: '1970nylxzml-0', code: '1970nylxzml-0', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=4.7 and magnitude<5",show:false},
    {database:"datacenter", name: '1970年以来地震目录（5<=M<6）', label: '5<=M<6', radioLabel: '1970nylxzml-1', code: '1970nylxzml-1', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=5 and magnitude<6",show:false},
    {database:"datacenter", name: '1970年以来地震目录（6<=M<7）', label: '6<=M<7', radioLabel: '1970nylxzml-2', code: '1970nylxzml-2', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=6 and magnitude<7",show:false},
    {database:"datacenter", name: '1970年以来地震目录（7<=M<8）', label: '7<=M<8', radioLabel: '1970nylxzml-3', code: '1970nylxzml-3', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=7 and magnitude<8",show:false},
    {database:"datacenter", name: '1970年以来地震目录（8<=M<9）', label: '8<=M<9', radioLabel: '1970nylxzml-4', code: '1970nylxzml-4', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=8 and magnitude<9",show:false},
    {database:"datacenter", name: '1970年以来地震目录（4.7<=M<5）', label: '4.7<=M<5', radioLabel: '1970nylxzml-0', code: '1970nylxzml-0', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=4.7 and magnitude<5 and del_flag='0'",show:false},
    {database:"datacenter", name: '1970年以来地震目录（5<=M<6）', label: '5<=M<6', radioLabel: '1970nylxzml-1', code: '1970nylxzml-1', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=5 and magnitude<6 and del_flag='0'",show:false},
    {database:"datacenter", name: '1970年以来地震目录（6<=M<7）', label: '6<=M<7', radioLabel: '1970nylxzml-2', code: '1970nylxzml-2', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=6 and magnitude<7 and del_flag='0'",show:false},
    {database:"datacenter", name: '1970年以来地震目录（7<=M<8）', label: '7<=M<8', radioLabel: '1970nylxzml-3', code: '1970nylxzml-3', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=7 and magnitude<8 and del_flag='0'",show:false},
    {database:"datacenter", name: '1970年以来地震目录（8<=M<9）', label: '8<=M<9', radioLabel: '1970nylxzml-4', code: '1970nylxzml-4', table:"jc_instrument_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_instrument_catalog@datacenter",zIndex:8,fieldId:"jic_id",sqlFilter:"magnitude>=8 and magnitude<9 and del_flag='0'",show:false},
    //1970年前4 3_4以上地震目录
    {database:"datacenter", name: '1970年前4 3_4以上地震目录（4.7<=M<5）', label: '4.7<=M<5', radioLabel: 'ls434ysqzml-0', code: 'ls434ysqzml-0', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=4.7 and magnitude<5",show:false},
    {database:"datacenter", name: '1970年前4 3_4以上地震目录（5<=M<6）', label: '5<=M<6', radioLabel: 'ls434ysqzml-1', code: 'ls434ysqzml-1', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=5 and magnitude<6",show:false},
    {database:"datacenter", name: '1970年前4 3_4以上地震目录（6<=M<7）', label: '6<=M<7', radioLabel: 'ls434ysqzml-2', code: 'ls434ysqzml-2', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=6 and magnitude<7",show:false},
    {database:"datacenter", name: '1970年前4 3_4以上地震目录（7<=M<8）', label: '7<=M<8', radioLabel: 'ls434ysqzml-3', code: 'ls434ysqzml-3', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=7 and magnitude<8",show:false},
    {database:"datacenter", name: '1970年前4 3_4以上地震目录（8<=M<9）', label: '8<=M<9', radioLabel: 'ls434ysqzml-4', code: 'ls434ysqzml-4', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=8 and magnitude<9",show:false},
    {database:"datacenter", name: '1970年前4 3_4以上地震目录（4.7<=M<5）', label: '4.7<=M<5', radioLabel: 'ls434ysqzml-0', code: 'ls434ysqzml-0', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=4.7 and magnitude<5 and del_flag='0'",show:false},
    {database:"datacenter", name: '1970年前4 3_4以上地震目录（5<=M<6）', label: '5<=M<6', radioLabel: 'ls434ysqzml-1', code: 'ls434ysqzml-1', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=5 and magnitude<6 and del_flag='0'",show:false},
    {database:"datacenter", name: '1970年前4 3_4以上地震目录（6<=M<7）', label: '6<=M<7', radioLabel: 'ls434ysqzml-2', code: 'ls434ysqzml-2', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=6 and magnitude<7 and del_flag='0'",show:false},
    {database:"datacenter", name: '1970年前4 3_4以上地震目录（7<=M<8）', label: '7<=M<8', radioLabel: 'ls434ysqzml-3', code: 'ls434ysqzml-3', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=7 and magnitude<8 and del_flag='0'",show:false},
    {database:"datacenter", name: '1970年前4 3_4以上地震目录（8<=M<9）', label: '8<=M<9', radioLabel: 'ls434ysqzml-4', code: 'ls434ysqzml-4', table:"jc_strong_catalog",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_strong_catalog@datacenter",zIndex:8,fieldId:"jsc_id",sqlFilter:"magnitude>=8 and magnitude<9 and del_flag='0'",show:false},
  ]);

  //根据行政区划代码查询活动数据列表
  const getDetailListByCode = (code) => {
    let array = [];
    let list = allListData.value;
    if (list != null && list.length > 0) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].iaCode == code) {
          array.push(list[i]);
        }
      }
    }
    tempTableListData.value = array;
    showTableBool.value = true;
  }
  const manualOpen = ref(false)
  const isShowLayer = ref(false)
  const showHideLegendDivBoolMap = ref(false)
  // 手动出图
  const manual = () => {
    isShowLayer.value = false
    manualOpen.value = true
  }
  // 图层
  const openLayer = () => {
    manualOpen.value = false
    isShowLayer.value = !isShowLayer.value
  }

  const getFormLists = (selectList) => {
    console.log("获取勾选图层列表");
    console.log(selectList);
    //根据勾选图层列表显示隐藏图层
    showHideLayer(selectList);
    //显示Arcgis服务活动断层图例
    showArcgisHddcLegend();
  }
  const isShowLegend = ref(false);
  //显示隐藏图例
  const openLegend = () => {
    showHideLegendDivBoolMap.value = !showHideLegendDivBoolMap.value
    isShowLegend.value = !isShowLegend.value;
  }

  //根据勾选图层列表显示隐藏图层
  function showHideLayer(selectList){
    console.log("selectList");
    console.log(selectList);
    let list = dataTypeInfoArray.value;
    for(let i=0;i<list.length;i++){
      let code = list[i].code;
      let bool = false;
      for(let j=0;j<selectList.length;j++){
        let selectCode = selectList[j].code + "-" + selectList[j].dictCode;
        if(selectCode==code){
          bool = true;
          break;
        }else if(selectList[j].code=="hddcarcgis" && code=="hddcarcgis"){//活动断层
          bool = true;
          break;
        }
      }
      list[i].show = bool;//是否显示图层
    }
    dataTypeInfoArray.value = list;
    console.log(list);
    //根据数据类别code、版本号查询图层
    getLayerByVersionDataType(0);
  }

  //根据数据类别code、版本号查询图层
  function getLayerByVersionDataType(i){
    let list = dataTypeInfoArray.value;
    if(i<list.length){
      let typeCode = list[i].code;//数据类别三级code
      let versionCode = "全部";//版本号："全部"则展示整个图层，null无版本号不展示
      let showBool = list[i].show;//是否显示
      //设置图层选择的版本号列表（添加、移除）并查询图层数据
      let returnBool = setActiveTypeCodeList(versionCode,typeCode,showBool);
      //alert(returnBool)
      //let returnBool = false;
      if((i+1)<list.length){
        if(returnBool){
          console.log(typeCode+"--returnBool"+returnBool);
          setTimeout(function(){
            //根据数据类别code、版本号查询图层
            getLayerByVersionDataType(i+1);
          },1000);
        }else{
          //根据数据类别code、版本号查询图层
          getLayerByVersionDataType(i+1);
        }
      }
    }
  }

  //设置图层选择的版本号列表（添加、移除）并查询图层数据
  function setActiveTypeCodeList(versionCode,typeCode,showBool){
    //根据三级数据类别获取版本数据
    let data = getLayerInfoByDictItemCode(typeCode);
    if(data!=null && versionCode){
      let typeCodeSelectArray = data.typeCodeSelectData;
      let bool = null;//是否添加版本号
      //添加、移除版本号
      if (!typeCodeSelectArray.includes(versionCode)) {
        if(showBool){
          typeCodeSelectArray.push(versionCode);//添加
          bool = true;
        }
      } else {
        typeCodeSelectArray.forEach((id, index) => {
          if (id === versionCode) {
            if(showBool==false){
              typeCodeSelectArray.splice(index, 1);//移除
              bool = false;
            }
          }
        });
      }
      //设置图层对应的选择版本号列表
      data.typeCodeSelectData = typeCodeSelectArray;
      resetClearAllBool.value = false;//是否重置清空全部图层数组
      //空间数据
      if(showBool && bool){//添加版本号
        //根据图层类型查询图层版本号数据
        allListData.value = [typeCode,versionCode,[],true,null];
        return true;
      }else if(showBool==false && bool==false){//移除版本号
        allListData.value = [typeCode,versionCode,[],false,null];
        return false;
      }
    }
    return false;
  }

  //根据三级数据类别获取版本数据
  const getLayerInfoByDictItemCode = (dictItemCode) => {
    let data = null;
    let datalist = typeCodeDataList.value;
    for(let i=0;i<datalist.length;i++){
      if(datalist[i].dictItemCode==dictItemCode){
        data = datalist[i];
        break;
      }
    }
    return data;
  }

  onMounted(() => {
    setLayerShowHideArray();
    initAllLayerDataArray();
  });

  //设置图例数组
  function setLayerShowHideArray(){
    let showHideArray = [];
    let dataTypeArray = dataTypeInfoArray.value;
    for(let i=0;i<dataTypeArray.length;i++){
      let item = dataTypeArray[i];
      showHideArray.push({ code: item.code, name: item.name, show:false,legendHtml:"" });
    }
    layerShowHideArray.value = showHideArray;
  }

  //初始化设置全部超图图层所需数据
  function initAllLayerDataArray(){
    let typeCodeDataArray = [];
    let allRadioIndexArray = [];
    let list = dataTypeInfoArray.value;
    if(list!=null && list.length>0){
      for(let i=0;i<list.length;i++){
        let data = list[i];
        //选择图层的版本号数据列表
        typeCodeDataArray.push({
          name: data.name,
          radioLabel: data.code,
          dictItemCode: data.code,
          spaceBool:true,//是否空间数据
          typeCodeSelectData:[],
          sqlFilter:data.sqlFilter,//sql过滤条件
        });
        //全部序号列表
        allRadioIndexArray.push(data.code);
      }
    }
    //选择图层的版本号数据列表
    typeCodeDataList.value = typeCodeDataArray;

    allRadioIndexData.value = allRadioIndexArray;
  }

  const showHideLegendDivBool = ref(false);//是否显示图例
  const layerShowHideArray = ref([]);//图层是否显示数组
  const showHideLayerDivBool = ref(false)
  //const showHideLegendDivBoolMap = ref(false)
  //图例
  const getLegendHtml = (obj)=>{
    //图层显示隐藏数组
    let showHideArray = layerShowHideArray.value;
    if(obj!=null){
      for(let i=0;i<showHideArray.length;i++){
        if(showHideArray[i].name==obj.name){
          console.log("名称匹配："+obj.name);
          showHideArray[i].show = obj.show;
          showHideArray[i].legendHtml = obj.legendHtml;//显示图例
          break;
        }
      }
      //是否显示图例
      let bool = false;
      for(let i=0;i<showHideArray.length;i++){
        if(showHideArray[i].show){
          bool = true;
          break;
        }
      }
      showHideLegendDivBool.value = bool;
    }else{//清空图例
      //是否显示图例
      for(let i=0;i<showHideArray.length;i++){
        showHideArray[i].show = false;
      }
      showHideLegendDivBool.value = false;
    }
  }

  //显示Arcgis服务活动断层图例
  function showArcgisHddcLegend(){
    let array = dataTypeInfoArray.value;
    let hddcArray = [];
    for(let i=0;i<array.length;i++){
      if(array[i].database=="arcgis" && array[i].show==true){
        hddcArray.push(array[i]);
      }
    }
    if(hddcArray.length>0){
      for(let i=0;i<hddcArray.length;i++){
        let label = hddcArray[i].label;
        let color = "#fff";
        if(label=="全新世断层"){
          color = "#ff2525";
        }else if(label=="晚更新世断层"){
          color = "#c922ff";
        }else if(label=="早中更新世断层"){
          color = "#5ab53c";
        }else if(label=="前第四纪断层"){
          color = "#2d2d2d";
        }
        let html = "";
        if(i==0){
          html += '<p style="text-align: center;font-weight: bold;">活动断层</p>';
        }
        //显示已展示活动断层图层的图例
        html += '<p style="height: 16px;">';
        html += '<span style="width: 40px;height: 5px;margin-top: 6px;background: '+color+';display: inline-block; "></span>';
        html += '<span style="position: relative;top: -2px;left: 20px;height: 16px;font-size: 16px;">'+label+'</span>';
        html += '</p>';
        //图例html
        getLegendHtml({name:label,legendHtml:html,show:true});
      }
    }
  }


  const test = () => {
    let item = proxy.$refs.layer.list[0]
    router.push({ path: `/quickMapping/index/${item.originalCode}`, query: { detailId: item.id, typeName: item.typeName } })
  }

  defineExpose({
    completeRefreshIndexMap
  })
</script>
<style scoped lang="scss">
  .container {
    width: 100%;
    height: 100%;
  }

  .operation-panel-left {
    position: absolute;
    top: 250px;
    z-index: 10;
    left: 16px;

    .el-col {
      padding: 10px 0;

      &:first-child>el-button {
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.22);
      }
    }
  }

  .operation-panel-right {
    position: absolute;
    top: 16px;
    z-index: 9;
    font-weight: bold;
    right: 16px;

    .el-card {
      .operation-item {
        text-align: center;
        cursor: pointer;

        &>.operation-item-icon {
          transform: scale(1.2);
          margin: 0 0 5px 0;

          &:hover,
          &:active {
            color: var(--el-color-primary);
          ;
          }
        }

        &:not(:last-child) {
          margin-bottom: 20px;
        }
      }
    }
  }

  .new-layerLengendDiv-split {
    width: 32px !important;
    height: 1px !important;
    padding: 0px !important;
    margin: 0px !important;
    margin-left: 10px !important;
    border-top: 1px dashed #6f7ea8;
  }

  /*图层图例*/
  .new-layerLegendDiv {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 54px;
    /*height: 220px;*/
    background: #fff;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid #707070;
    border-radius: 4px;
    cursor: pointer;
    z-index: 5;
  }

  .new-layerLegendDiv p {
    padding: 10px;
    margin: 0px;
  }

  .new-layerLegendDiv p img {
    width: 25px;
    height: 25px;
    margin-left: 3px;
  }

  .new-layerLegendDiv p span {
    width: 32px;
    height: 21px;
    font-size: 14px;
    color: #3a385e;
    text-align: center;
    line-height: 24px;
    border: 0.5px solid #f5f5f5;
  }

  //图例
  .layerMap-legend {
    position: absolute;
    right: 10px;
    bottom: 10px;
    min-height: 50px;
    background: #fff;
    padding: 10px;
    overflow: auto;
    min-width: 200px;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
    border:1px solid #707070;
    border-radius: 4px;
  }
  .layerMap-legend p:first-child{
    text-align: center;font-weight: bold;
  }
</style>